<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="/assets/vant/index.css"/>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="/assets/vue/vue.global.js"></script>
  <script src="/assets/vant/vant.min.js"></script>
  <script src="/assets/axios/axios.js"></script>
</head>
<body>

<div id="app">
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <script>
    const main = {
      data(){
        return {}
      }
    }
    const app = Vue.createApp(main);
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount("#app");
  </script>
</div>
</body>
</html>